a<template>
    <div id="navbar">
      <div class="container">
        <div id="navbar-log" class="left">
          <router-link to="/">cll.cool</router-link>
        </div>
        <div id="navbar-menu" class="left">
          <ul>
            <li class="navbar-list"><router-link class="navbar-a" to="/home">首页</router-link></li>
            <li class="navbar-list"><router-link class="navbar-a" to="/home">导航1</router-link></li>
            <li class="navbar-list"><router-link class="navbar-a" to="/home">导航2</router-link></li>
            <li class="navbar-list"><router-link class="navbar-a" to="/home">导航3</router-link></li>
            <li class="navbar-list"><router-link class="navbar-a" to="/home">导航4</router-link></li>
            <li class="navbar-list"><router-link class="navbar-a" to="/About">关于</router-link></li>
          </ul>
        </div>
        <div id="navbar-login" class="right">
          <ul>
            <li class="navbar-list"><router-link class="navbar-a" to="/home">登录</router-link></li>
            <li class="navbar-list"><router-link class="navbar-a" to="/home">注册</router-link></li>
          </ul>
        </div>
        <div id="navbar-music" class="right">
          <router-link class="navbar-a"  to="/home">音乐播放器</router-link>
        </div>
      </div>
    </div>
</template>

<script>
export default {
data(){
    return{
      activeIndex2:0,
    }
},
component:{

},
methods:{
  handleSelect(){

  }
}

}
</script>

<style lang="scss" scoped>
.left{
  float: left;
}
.right{
  float: right;
}
.center{

}
#navbar{

  .container{
    width: 1170px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  #navbar-log{
    a{
      text-decoration: none;
      text-align: center;
      background-image: -webkit-linear-gradient( left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db );
      color: transparent;
      -webkit-background-clip: text;
      background-size: 200% 100%;
      animation: slide 2s infinite linear;
      font-weight: 600;
      font-size: 28px;
    }
  }
  #navbar-menu{
    width: 600px;
    margin:0 auto;
  }
  #navbar-music{

  }
  #navbar-login{

  }
  .navbar-list{
    float: left;
  }
  .navbar-a{
    margin: 0 10px;
    font-size:20px ;
    width: 100%;
    height: 100%;
    display: block;
    color: #ccc;
  }
  .navbar-a:hover{
    color: white;
  }
}
.container:after{
    content:"";
    display:block;
    clear:left;
    visibility:hidden;
}
@keyframes slide {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}
</style>